Toast#

The toast view modifier displays a temporary notification message (toast) over the current view. It is typically used to show short feedback messages such as “Saved successfully,” “Action completed,” or “Network error.”

You can show a simple text message or provide a fully custom view as the toast’s content. You can also control its duration, position, background color, text color, corner radius, and shadow style.

Type Definition#

1toast?: {
2  duration?: number | null
3  position?: "top" | "bottom" | "center"
4  backgroundColor?: Color | null
5  textColor?: Color | null
6  cornerRadius?: number | null
7  shadowRadius?: number | null
8} & (
9  | { message: string; content?: never }
10  | { message?: never; content: VirtualNode }
11) & ({
12  isPresented: boolean
13  onChanged: (isPresented: boolean) => void
14} | {
15  isPresented: Observable<boolean>
16})

Property Descriptions#

isPresented: boolean and onChanged(isPresented: boolean): void#

Description: Uses the isPresented and onChanged properties to control the visibility and behavior of the toast.

Example:

1const [showToast, setShowToast] = useState(false)
2
3toast={{
4  isPresented: showToast,
5  onChanged: setShowToast,
6  message: "Saved successfully"
7}}

isPresented: Observable<boolean>#

Description: Uses the isPresented observable to control the visibility and behavior of the toast.

Example:

1const showToast = useObservable(false)
2
3toast={{
4  isPresented: showToast,
5  message: "Saved successfully"
6}}

duration?: number | null#

Description: Specifies how long (in seconds) the toast should remain visible. Defaults to 2 seconds.

Example:

1toast={{
2  isPresented: showToast,
3  onChanged: setShowToast,
4  duration: 3,
5  message: "Action completed"
6}}

position?: "top" | "bottom" | "center"#

Description: Controls where the toast appears on the screen.

Available values:

• "top" – Displays the toast at the top.
• "bottom" – Displays the toast at the bottom (default).
• "center" – Displays the toast in the center.

Example:

1toast={{
2  isPresented: showToast,
3  onChanged: setShowToast,
4  position: "top",
5  message: "New message received"
6}}

backgroundColor?: Color | null#

Description: Sets the background color of the toast.

Example:

1toast={{
2  isPresented: showToast,
3  onChanged: setShowToast,
4  backgroundColor: "blue",
5  message: "Upload successful"
6}}

textColor?: Color | null#

Description: Sets the text color of the toast message.

Example:

1toast={{
2  isPresented: showToast,
3  onChanged: setShowToast,
4  textColor: "white",
5  message: "Download failed"
6}}

cornerRadius?: number | null#

Description: Sets the corner radius of the toast. Defaults to 16.

Example:

1toast={{
2  isPresented: showToast,
3  onChanged: setShowToast,
4  cornerRadius: 8,
5  message: "Item added"
6}}

shadowRadius?: number | null#

Description: Sets the blur radius of the toast’s shadow. Defaults to 4.

Example:

1toast={{
2  isPresented: showToast,
3  onChanged: setShowToast,
4  shadowRadius: 6,
5  message: "Success"
6}}

Displaying a Simple Message#

Example:

1function View() {
2  const [showToast, setShowToast] = useState(false)
3
4  return (
5    <List
6      toast={{
7        isPresented: showToast,
8        onChanged: setShowToast,
9        message: "Data saved successfully",
10        duration: 2,
11        position: "bottom",
12        backgroundColor: "green",
13        textColor: "white"
14      }}
15    >
16      <Button
17        title="Save"
18        action={() => setShowToast(true)}
19      />
20    </List>
21  )
22}

When the button is pressed, a green toast with the message “Data saved successfully” appears at the bottom for 2 seconds.

Displaying Custom Content#

Description: Instead of plain text, you can provide a custom VirtualNode (view) as the toast content. This allows you to include icons, multiple text lines, or other view layouts.

Example:

1function View() {
2  const [showToast, setShowToast] = useState(false)
3
4  return (
5    <List
6      toast={{
7        isPresented: showToast,
8        onChanged: setShowToast,
9        content: (
10          <HStack spacing={8}>
11            <Image systemName="checkmark.circle.fill" />
12            <Text foregroundStyle="white">Upload Complete</Text>
13          </HStack>
14        ),
15        backgroundColor: "black",
16        cornerRadius: 12
17      }}
18    >
19      <Button
20        title="Show Toast"
21        action={() => setShowToast(true)}
22      />
23    </List>
24  )
25}

This example shows a custom toast with an icon and message inside a black rounded background.

Best Practices#

1. Keep state synchronized Always ensure isPresented and onChanged stay in sync so the toast can be properly dismissed.

2. Use for lightweight notifications Toasts should only display short, transient messages and should not include complex interactions.

3. Avoid multiple simultaneous toasts Displaying more than one toast at the same time may confuse users.

4. Combine with user actions Pair the toast with Button, Form, or other components to provide quick feedback after an action.